<template>
    <el-container>
        <el-header>
            <div style="display: flex;align-items: center; justify-content: flex-start;flex-wrap: wrap;">
                <!-- <h1 style="margin: 0; ">人事管理系统</h1> -->
                <canvas id="myCanvas" class="text-init"></canvas>
            </div>
            <div>
                <el-dropdown :hide-on-click="false" @command="handleCommand">
                    <span class="el-dropdown-link">
                        <div style="display: flex;align-items: center; margin-right: 2%;">
                            <el-avatar icon="el-icon-user-solid" :size="40"
                                :src="$store.state.UserInfo.userInfo.image"></el-avatar>
                        </div>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="privateInfo">个人信息</el-dropdown-item>
                        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside width="180px">
                <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
                    <el-menu-item index="/home/main">
                        <i class="iconfont">&#xe7c6;</i>
                        <span slot="title">系统首页</span>
                    </el-menu-item>
                    <el-submenu index="/home/users">
                        <template slot="title">
                            <i class="iconfont">&#xe612;</i>
                            <span>员工管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/statistics">员工统计</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group>
                            <el-menu-item index="/home/userInfo">员工信息</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="/home/departments">
                        <template slot="title">
                            <i class="iconfont">&#xe66b;</i>
                            <span slot="title">部门管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/dept">部门信息</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="/home/jobs">
                        <template slot="title">
                            <i class="iconfont">&#xe611;</i>
                            <span slot="title">职业管理</span>
                        </template>
                        <el-menu-item-group>
                            <el-menu-item index="/home/job">职业信息</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="/home/privateInfo">
                        <i class="iconfont">&#xe628;</i>
                        <span slot="title">个人中心</span>
                    </el-menu-item>
                    <el-menu-item index="/home/loading">
                        <i class="iconfont">&#xe743;</i>
                        <span slot="title">下载中心</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    mounted() {
        this.init()
    },
    data() {
        return {
            flag: true
        }
    },
    methods: {
        init() {
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.font = "40px Arial";

            // 创建线性渐变
            var gradient = ctx.createLinearGradient(10, 50, 200, 50);
            gradient.addColorStop(0, 'red');
            gradient.addColorStop(1, 'blue');

            // 将渐变应用到文本填充样式
            ctx.fillStyle = gradient;

            // 绘制带渐变的填充文本
            ctx.fillText("人事管理系统", 10, 50);
        },
        handleCommand(command) {
            switch (command) {
                case 'logout':
                    localStorage.removeItem('token');
                    this.$store.commit('removeUserInfo')
                    this.$router.push('/login')
                    break
                case 'privateInfo':
                    this.$router.push('/home/privateInfo')
                    break
            }
        }
    }
}
</script>

<style lang="less" scoped>
.el-header {
    background-color: #B3C0D1;
    color: #333;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    line-height: 60px;
}

.el-aside {
    background-color: #ffffff;
    color: #fff;
    text-align: center;
    width: 180px;
    line-height: calc(100vh-60px);
}
.iconfont{
  font-family: "iconfont" !important;
  font-size: 21px;
  font-style: normal;
  margin-right: 3px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: calc(100vh-60px);
    overflow: hidden;
    /* 隐藏所有滚动条 */

}

.el-dropdown {
    display: flex;
}

.text-init {
    width: 130px;
    height: 130px;
    margin-top: 48%;
    margin-left: 20%;
}

.el-container {
    height: 100vh;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 180px;
    min-height: 400px;
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>